<template>
	<div id="batchOpenCard" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item>普通水卡</el-breadcrumb-item>
						<el-breadcrumb-item>批量开卡</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button>	 -->
				</div>
			</div>
		</div>
		<div class="editwrap">
      		<h4 class="four">批量开卡信息</h4>
			<el-row type="flex" class="m-10">
				<div class="formitem">
					<span class="title">起始卡号</span>
					<el-input type="number" name="startCard"  maxlength="24"  v-model="startCard" placeholder="请输入起始卡号" style="width:360px" />
					<i class="icon">*</i>
				</div>
			</el-row>
			<el-row type="flex" class="m-10">
				<div class="formitem">
					<span class="title">终止卡号</span>
					<el-input type="number" name="endCard" maxlength="24"  v-model="endCard" placeholder="请输入终止卡号" style="width:360px" />
					<i class="icon">*</i>
				</div>
			</el-row>
			<el-row type="flex" class="m-10">
				<div class="formitem">
					<span class="title">充值金额</span>
					<el-input type="Number" maxlength="7"  name="rechargeMoney" v-model="rechargeMoney" placeholder="请输入充值金额" style="width:360px" />
					<i class="icon"></i>
				</div>
			</el-row>
			<el-row type="flex" class="m-10">
				<div class="formitem">
					<span class="title">赠送金额</span>
					<el-input type="Number" maxlength="7"  name="sendMoney" v-model="sendMoney" placeholder="请输入赠送金额" style="width:360px" />
					<i class="icon"></i>
				</div>
			</el-row>
			<el-row type="flex" class="m-10">
				<div class="formitem">
					<span class="title">押金</span>
					<el-input type="Number" maxlength="5" name="deposit" v-model="deposit" placeholder="请输入押金" style="width:360px" />
					<i class="icon"></i>
				</div>
			</el-row>
			<el-button size="medium" type="primary" @click="confirmBtn">提 交</el-button>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'batchOpenCard',
		data: function () {
			return {
				startCard:'',//起始卡号
				endCard:'',//终止卡号
				rechargeMoney:0,//充值金额
				sendMoney:0,//赠送金额
				deposit:0,//押金
				stop:false,
			};
		},
		// 初始化执行方法
		created: function () {
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//复制方法
			copyFun(data){
				var that = this;
				 this.$copyText(data).then(function (e) {
					that.$message.success('复制成功!');
				}, function (e) {
					that.$message.error('复制失败!');
					console.log('不能复制，复制失败',e);
				})
			},
			//展示失败或者成功弹窗的弹窗
			showPop(data){
				var that=this;
				var html="";
				var error_card=data.data.error_card;
				var errorNum=data.data.error;
				var total=data.data.total?data.data.total:data.data.success+errorNum
			 	html+="<div class='PopBackMsg'>"
			 	html+="<h2>"+data.message+"</h2>"
			 	html+="<div class='PopBackTitle'>本次处理水卡 <span>" +total+ "</span>张</div>"
				 html+="<div class='PopBackTitle'>开卡成功 <span>" +data.data.success+ "</span> 张,  开卡失败水卡 <span>"+errorNum+"</span> 张</div>"
				 html+=error_card.length>0?"<div class='list-title'>开卡失败卡号:</div>":"",
				 html+="<div class='errorLis'>"
				 if(error_card.length<=0&&errorNum==0){
					html+="<div class='success-box'>"
					html+="<img src='/static/images/successicon2.png'>"
					html+="<div class='success-hint'>"+data.message+"</div>"
					html+="</div>"
				 }
				 error_card.length>0 && error_card.forEach((item,index)=>{
				 	html+="<div>卡号: "+item+"</div>"
				 })
				 html+="</div>"
				const text=error_card.length>0?"批量复制并关闭":"关闭";
				this.$confirm(html, {
					center: true,
					dangerouslyUseHTMLString: true,
					confirmButtonText: text,
					cancelButtonText: '查看记录',
				}).then(()=>{
					if(error_card.length>0){
							that.copyFun(error_card);
						}
				}).catch(() => {
					this.$router.push({
						path: '/userapplylist'
					})       
				});
			},
			//提交表单
			confirmBtn(){
				var that=this;
				var start_serial_number=that.startCard;
				var end_serial_number=that.endCard;
				var recharge_money=that.rechargeMoney;
				var give_money=that.sendMoney;
				var deposit=that.deposit;
				if(start_serial_number==''){
					that.$message.error(`起始卡号不能为空`);
					return false;
				}
				if(end_serial_number==''){
					that.$message.error(`终止卡号不能为空`);
					return false;
				}
				if(start_serial_number>end_serial_number){
					that.$message.error(`结束卡号必须大于起始卡号!`);
					return false;
				}
				if(this.stop){
					return false
				}
				this.stop=true;
				that.$post({
					url: 'Partner/CardSerial/addSerialCardAll',
					data: {start_serial_number,end_serial_number,recharge_money,give_money,deposit},
					success: data => {
						if (data.code == 1000) {
							that.showPop(data);
						} else {
							that.$message.error(data.message);
						}
						this.stop=false;
					}, error: e => {
						this.stop=false;
					}
				});

			}
		},
		mounted() {
		}
	};
</script>

<style scoped>
	#batchOpenCard .editwrap {
    padding: 10px 40px 30px;
  }
  
  #batchOpenCard .formitem {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  
  #batchOpenCard .title {
    font-size: 16px;
    color: #323333;
    padding-right: 15px;
    min-width: 80px;
  }

  #batchOpenCard .icon {
    font-style: normal;
    margin-left: 5px;
    color: #FF6565;
  }
#batchOpenCard .formitem .onlyOne {
    position: relative;
  }

  #batchOpenCard .formitem .onlyOne input {
    padding: 0px;
    text-align: center;
  }
  .m-10 {
    margin: 10px 0;
  }
</style>